<template>
	<div class="main">
		<a-card class="footages" title="添加个人素材" @click="insert">
			<img src="../assets/cil-image-plus.svg" style="opacity: 0.3" />
		</a-card>
		<a-card class="footages" v-for="item,index in footageList" :span="6" :key="index" >
      <template v-slot:title>{{item.name}}</template>
			<div class="deleteBot" @click="delFootage(item.id)">
				<DeleteOutlined />
			</div>
			<div class="downBot" @click="downloadFootage(item)">
				<DownloadOutlined />
			</div>
			<div class="footageimg"><img :src="item.src" /></div>
		</a-card>
		<Modal v-model="showModal" title="请选择" @on-ok="insertImgFile" @on-cancel="showModal = false,imgFile = null ">
			<Upload :before-upload="handleUpload" action="#">
				<Button icon="ios-cloud-upload-outline">选择图片文件</Button>
			</Upload>
			<img class="uploadImg" :src="imgFile" />
			<Input v-model="imgName" placeholder="请输入素材名称"></Input>
		</Modal>
	</div>
</template>
<script>
	import {
		getImgStr
	} from "@/utils/utils";
	import {
		v4 as uuid
	} from 'uuid';
	import {
		DeleteOutlined,
		DownloadOutlined
	} from '@ant-design/icons-vue';
	export default {
		name: '个人素材/iFootage',
		components: {
			DeleteOutlined,
			DownloadOutlined
		},
		data() {
			return {
				showModal: false,
				imgFile: '',
				imgName: '',
				footageList: [
				],
        a:" ",
			}
		},
		methods: {
      initList(){
        if(this.$store.state.token === ""){
          confirm("请先登录")
          return
        }

        this.$http.post(
            'api/posterEditor/getIFootageList/',
            {
              token:this.$store.state.token,
            },
        ).then(res => {
          console.log(res.data)
          if(res.data.code === 0){
            confirm(res.data.message)
          }else{
            // this.footageList = res.data
            this.footageList = []
            for(var item of res.data){
              this.footageList.push({
                id:item.pk,
                name:item.fields.i_footage_name || "未命名",
                src:'api/'+item.fields.i_footage_src,
                type:item.fields.i_footage_type,
              })
            }
          }
        })
      },
			insert() {
				this.imgFile = ''
				this.showModal = true
			},
			insertImgFile() {
				// const imgEl = document.createElement('img');
				// imgEl.src = this.imgFile
				// 插入页面
				// document.body.appendChild(imgEl);
        if(this.imgFile === ''){
          confirm("未选择图片")
          return;
        }
        console.log('上传');
        this.$http.post('api/posterEditor/addIFootage/',
            {
              img : this.imgFile,
              token : this.$store.state.token,
              type : this.type,
              name : this.imgName,
            },
        ).then( res => {
              if(res.data.code === 0){
                confirm(res.data.message)
              }else{
                confirm('上传成功')
                this.initList()
              }

        })
			},
			// 选择文件
			handleUpload(file) {
        if(file.type == "image/png" || file.type == "image/jpeg" || file.type == "image/jpg" || file.type == "image/svg+xml") {

				getImgStr(file).then(res => {
					this.imgFile = res
          this.type = file.name.replace(/.+\./, "");
          console.log(this.type)
          console.log(res);
				})
        }else {
          confirm("请上传正确的图片")
        }
			},
			delFootage(id) {
				console.log("删除该id的个人素材");
        this.$http.post(
            'api/posterEditor/deleteIFootage/',
            {
              token : this.$store.state.token,
              id : id,
            }
        ).then( res => {
          if(res.data.code === 0){
            confirm(res.data.message)
          }else{
            confirm('删除成功')
            this.initList()
          }
        })
			},
			downloadFootage(item) {
				console.log("下载该id的图片");

				const fileUrl = item.src; // 文件的URL地址
				fetch(fileUrl,{mode: 'no-cors'})
					.then(response => response.blob())
					.then(blob => {
						const url = window.URL.createObjectURL(blob);
						const link = document.createElement('a');
						link.href = item.src;
						link.setAttribute('download', item.name);
						document.body.appendChild(link);
						link.click();
					})
					.catch(error => {
						console.error(error);
					});
			},
		},
		mounted() {
      this.initList()
		}
	}
</script>
<style>
	.main {
		display: inline-block;
		background-color: rgb(80, 89, 110);
		width: 100%;
		min-height: 100%;
    padding-top: 8px;
	}

	.footages {
		height: 450px;
		text-align: center;
		display: inline-block;
		vertical-align: middle;
		width: 380px;
		/*height: 400px;*/
		margin-left: 5px;
		margin-right: 5px;
		margin-bottom: 15px;
		color: gray;


		.footageimg {
			/*position: fixed;*/
			width: 100%;
			height: 360px;
			margin: auto;

			img {
				margin: auto;
				max-height: 100%;
				max-width: 100%;
				/*width: 100%;*/
				/*height: 100%;*/
			}
		}
	}

	.deleteBot {
		position: absolute;
		right: 15px;
		top: 15px;
		/* color: #ff0000; */
	}

	.downBot {
		position: absolute;
		right: 15px;
		top: 35px;
	}

	.uploadImg {
		max-height: 200px;
		max-width: 200px;
	}
</style>